<template>
  <div class="continer">
<div style="display: flex; flex-direction: row;">
  <div style="margin-top: 3px;">
    <span> 
      姓名查询  &emsp; 
    </span>

  </div>
  <div>
    <el-input v-model="input" placeholder="请输入" style="width: 200px;"/>
    <el-button :icon="Search" @click="search" circle />
  </div>

</div>
<div>
  <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">

    <el-table-column
      prop="regTime"
      label="注册时间"
      sortable
      width="180"
      column-key="date"
    />
    <el-table-column label="头像">
      <template #default="scope">
      <img  style="width: 50px; " :src="scope.row.headPortrait" alt="">
      </template>
    </el-table-column>
    <el-table-column prop="userName" label="用户名" width="180" />
    <el-table-column prop="phoneNumber" label="手机号" />
    <el-table-column prop="realName" label="真实名字" />
    <el-table-column prop="money" label="余额" />
    <el-table-column prop="shippingAddress" label="收货地址" />

    <el-table-column
      prop="tag"
      label="状态"
      width="100"
      :filters="[
        { text: '正常', value: 0 },
        { text: '未启用', value: 1 },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag
          :type="scope.row.status === 0 ? '' : 'success'"
          disable-transitions
          >{{  scope.row.status === 0 ? '启用':'未启用' }}</el-tag
        >
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scop">
        <ElButton @click="handClick(scop.row,scop.row.userName)">{{ scop.row.status === 0 ? '禁用':'启用' }}</ElButton>
        <el-button text @click="charge(scop.row.userName,scop.row)">充值</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
<div>
  <el-pagination  v-model:current-page="currentPage" :page-size="pageSize" :pager-count="11" layout="prev, pager, next" :total="total"
        @current-change="currentChange" />
</div>
  </div>



  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
  >
  请输入你要冲多少
  <el-input-number     min="1" v-model="num" :step="2" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">好</el-button>
        <el-button type="primary" @click="confirmMoney()">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElMessage, ElTable, type TableColumnCtx } from 'element-plus'
import {
  Search,
} from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'


import { getUserList ,getUserCount,changeStatus, findUserByName,confirmMoneyApi} from '../../api/Admin'
import type {User} from '../../api/Admin'

const tableRef = ref<InstanceType<typeof ElTable>>()

const currentPage = ref(1)

const pageSize = ref(20)

const total = ref(100)

const status = ref(0)

const input = ref('')

const dialogVisible = ref(false)

const num = ref<number>(1)


const pUserName = ref()
const charge = (userName:string,row:any) => {
dialogVisible.value = true
pUserName.value = userName

}
const confirmMoney =() => {
  console.log(num.value);
  console.log(pUserName);
  let c = currentPage.value
  let s = pageSize.value
  confirmMoneyApi({
    userName:pUserName.value,
    money:num.value
  }).then(res => {
    if(res .data.code == 200){
      getUserList((s * (c - 1)) ,s).then(res => {
    tableData.value = res.data.data
    dialogVisible.value = false
})
ElMessage({message:res.data.msg,type:'success'})
    }else{
      ElMessage({message:res.data.msg,type:'error'})
    }

  })
}

const search = () => {
  console.log(currentPage.value);
  console.log(pageSize.value);
  
  let c = currentPage.value
  let s = pageSize.value
  if(input.value !== '')
  findUserByName(input.value).then(res => {
    tableData.value = res.data.data
  })
  else{
    getUserList((s * (c - 1)) ,s).then(res => {
  tableData.value = res.data.data
})
  }
}

const handClick = (row:any,userName:any) => {
row.status = row.status === 1 ? 0 : 1

changeStatus(userName).then(res => {

})
}

getUserCount().then (res => {
total.value = res.data.data
})

getUserList(currentPage.value - 1,pageSize.value).then(res => {
  tableData.value = res.data.data
})

const currentChange =  (page: number) => {
  getUserList((page - 1) * pageSize.value ,pageSize.value).then(res => {
  tableData.value = res.data.data
})
}
const filterTag = (value: string, row: User) => {
  return row.status  === value
}

const tableData = ref<Array<User>>()
</script>

<style scoped >

</style>